<script setup>
import { thirdPageIcons, rotatePicture } from '@/stores/homeData.js'

const radius = 210
const imgWidth = 180
const imgHeight = 250

const imageStyles = ref([]);
const spinContainerStyle = computed(() => ({
  width: `${imgWidth}px`,
  height: `${imgHeight}px`,
}))

onMounted(() => {
  imageStyles.value = rotatePicture.map((_, index) => ({
    transform: `rotateY(${index * (360 / rotatePicture.length)}deg) translateZ(${radius}px)`,
    transition: 'transform 1s',
    transitionDelay: `${(rotatePicture.length - index) / 4}s`,
  }))
})
</script>

<template>
  <v-container fluid class="container">
    <v-row class="d-flex flex-row">
      <!-- 左侧布局 -->
      <v-col cols="6" class="leftLayout d-flex flex-column">
        <div class="title">古色古香 实践展演</div>
        <div class="introduce">
          文学与传媒学院秉承"以生为本、实践育人"的办学理念，坚持内涵建设，在教学中坚持"实践育人"的方向，开创了学科专业融合、课内课外融合、研究应用融合、学生教师融合和校内校外融合"五融合"的培养模式。文传实践展演至今已开展十余年，为文传师生搭建了以实践为手段的创新型综合培养平台。
        </div>
        <div class="imgGroup d-flex flex-row align-center ">
          <template v-for="(item, index) in thirdPageIcons" :key="index">
            <div class="imgItem d-flex flex-column justify-center align-center">
              <img :src="item.imgUrl" alt="">
              <div>{{ item.str }}</div>
            </div>
          </template>
        </div>
      </v-col>

      <!-- 右侧布局 -->
      <v-col cols="6" class="rightLayout d-flex justify-center align-center">
        <div class="drag-container" ref="spinContainerRef">
          <div class="spin-container" :style="spinContainerStyle">
            <img v-for="(src, index) in rotatePicture" :key="index" class="imgs" :src="src" :style="imageStyles[index]"
              alt="" />
          </div>
        </div>
      </v-col>
    </v-row>
    <!-- <v-row class="footer"></v-row> -->

  </v-container>
</template>

<style scoped lang="scss">
// 定义媒体查询参数
$breakpoints: (
  'phone':320px,
  'pad':481px,
  'notebook':769px,
  'desktop':1025px,
  'tv':1201px
);

// 定义媒体查询混合
@mixin respondTo($breakname) {
  $bp: map-get($breakpoints, $breakname);

  @media(min-width:$bp) {
    @content
  }
}


.container {
  width: 100vw;
  height: 100vh;
  position: relative;

  background-image: linear-gradient(to top, #b3cee1, #fff);
}

.leftLayout {
  width: 100%;
  height: 98.5vh;
  padding: 10vh 5vh 3vh 10vh;
}

.title {
  // 此处需要媒体查询
  font-size: 1.5em;
}

.introduce {
  // 此处需要媒体查询
  margin-top: 15px;
  font-size: 0.9em;
  width: 85%;
  letter-spacing: 1px;
  line-height: 25px;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}



.imgGroup {
  width: 85%;
  margin-top: 30px;
  justify-content: space-between;
}

.imgItem {
  width: 25%;
}

.imgItem img {
  width: 100%;
  height: 100%;
}

.WMButton {
  width: 35%;
  margin: auto;
  margin-right: 40%;
}

.rightLayout {
  width: 100%;
  height: 100vh;
  transform-style: preserve-3d;
  perspective: 1000px;
  display: flex;
  position: relative;

}

.drag-container,
.spin-container {
  position: relative;
  display: flex;
  transform-style: preserve-3d;
  transform: rotateX(-10deg);
  margin-top: -12%;
}

.spin-container {
  animation: spinRevert 30s infinite linear;
}

.drag-container img {
  transform-style: preserve-3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 200px;
  font-size: 50px;
  text-align: center;
  box-shadow: 0 0 8px rgba(65, 166, 243, 1);
}

.drag-container img:hover {
  box-shadow: 0 0 15px rgba(65, 166, 243, 1);
}

// .ground {
//   width: 900px;
//   height: 900px;
//   position: absolute;
//   top: 100%;
//   left: 50%;
//   transform: translate(-50%, -50%) rotateX(90deg);
//   background: radial-gradient(center center, farthest-side, #9993, transparent);
// }


@keyframes spinRevert {
  from {
    transform: rotateY(360deg);
  }

  to {
    transform: rotateY(0deg);
  }
}

.footer {
  position: absolute;
  width: 100vw;
  height: 25%;
  bottom: 3%;
  right: 1%;
  background-image: url('/src/assets/images/allin.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}
</style>